<template>
  <div>
    <el-form
      ref="formDataEntrustMaggess"
      class="base-pipeline-layout"
      :model="formDataEntrustMaggess"
      status-icon
      label-width="110px"
    >
      <el-form-item label="委托单号" prop="orderNum">
        <el-input
          v-model="formDataEntrustMaggess.orderNum"
          disabled
          style="width: 100%"
          autocomplete="off"
        ></el-input>
        <div class="chioseEntrustOrder" @click="chioseEntrustOrder">+</div>
      </el-form-item>
      <el-form-item label="单位地址" prop="customerAddress">
        <el-input
          v-model="formDataEntrustMaggess.customerAddress"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位名称" prop="customerName">
        <el-input
          v-model="formDataEntrustMaggess.customerName"
          :disabled="readOnly || customerUpdateState"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="formDataEntrustMaggess.phone"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="委托人" prop="entrustPeople">
        <el-input
          v-model="formDataEntrustMaggess.entrustPeople"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="formDataEntrustMaggess.email"
          :disabled="readOnly"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <ChioceEntrustOrderMessage
      ref="ChioceEntrustOrderMessage"
      :dialog-form-visible.sync="dialogFormVisible"
      @closeChioseEntrustOrder="closeChioseEntrustOrder"
    />
  </div>
</template>
<script>
import ChioceEntrustOrderMessage from "./ChioceEntrustOrderMessage.vue";
export default {
  name: "FormDataEntrustMessage",
  components: { ChioceEntrustOrderMessage },
  props: {
    state: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    entrustId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 选择完委托单信息将单位名称改为不可编辑
      customerUpdateState: false,
      entrustOrderId: "",
      buttonState: true,
      dialogFormVisible: false,
      formDataEntrustMaggess: {
        id: 0,
        orderNum: "",
        customerAddress: "",
        customerName: "",
        phone: "",
        entrustPeople: "",
        email: "",
      },
      detectionItemIdList: [],
      entrustSampleDetectionId: "",
      entrustSampleDetection: {},
    };
  },
  watch: {},
  created() {},
  methods: {
    // 关闭选择委托单
    closeChioseEntrustOrder(data) {
      this.formDataEntrustMaggess =
        this.$refs.ChioceEntrustOrderMessage.entrustData;
      this.entrustOrderId = this.$refs.ChioceEntrustOrderMessage.entrustId;
      // this.detectionItemIdList = data.detectionItemIdList;
      // this.entrustSampleDetectionId = data.entrustSampleDetectionId;
      // this.entrustSampleDetection = data.entrustSampleDetection;
      this.customerUpdateState = true;
      this.$emit("closeChioseEntrustOrder");
    },
    chioseEntrustOrder() {
      if (!this.entrustId || this.state) {
        if (!this.readOnly) {
          this.dialogFormVisible = true;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.chioseEntrustOrder {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
